<template>
  <div class="test-main">
    <div class="app-container" :style="heightFlag ? 'height:2000px' : 'height:auto'">
      <el-row :gutter="10">
          <el-button ripple type="primary"  @click="openWindowUrl">打开一个窗口</el-button>
           <el-button ripple type="warning"  @click="scrollFun">窗口滚动</el-button>
          <el-input style="width:300px;margin:0 10px" v-model="val"  id="#input" ref="valInput"></el-input>
          <el-button ripple type="success"  @click="copyBtn(val,$event)">复制文本</el-button>
      </el-row>
      <h1>富文本</h1>
      <edittor :html="html" ref="edittor"></edittor>
      <el-button type="primary" @click="getHtml">获取文本</el-button>
      <!-- 返回顶部 -->
      <el-backtop @click="backTop"> UP </el-backtop>
    </div>
  </div>
</template>

<script>
import openWindow from '@/utils/open-window';
import {scrollTo} from '@/utils/scroll-to';
import handleClipboard  from '@/utils/clipboard';
import edittor from '@/components/edittor/edittor';

export default {
  data(){
    return {
      heightFlag:false,
      val:'http://www.webwlx.com/',
      html:'http://www.webwlx.com/'
    }
  },
  components:{
      edittor
  },
  methods:{
    openWindowUrl(){
      openWindow('http://www.webwlx.com/','我的博客',400,800)
    },
    getHtml(){
      let html = this.$refs.edittor.getHtml()
      console.log("🤬 ~ getHtml ~ html", html)
    },
    scrollFun(){
      this.$message('右下角有返回顶部')
      this.heightFlag = true
      scrollTo(2000)
    },
    backTop(){
      this.heightFlag = false
      scrollTo(0)
    },
    copyBtn(val,event){
      handleClipboard(val,event)
    }
  }

}
</script>

<style lang="scss" scoped>
.test-main{
  >>>.el-backtop{
    width: 100px;
    height: 100px;
  }
}
.edit-main{
  textarea{
    width: 100%;
    height: 400px;
  }
}


</style>